<template>
  <div class="app-container" style="background-color: #f0f2f5">
    <div
      class="data-pad u-f-ajc u-f-row"
      style="width: auto; margin: 0 50px; margin-top: 30px; margin-bottom: 40px"
    >
      <div class="data-box" style="margin-right: 30; float: left">
        <div style="float: left">
          <img
            src="../../../assets/img/user-pic.png"
            mode="widthFix"
            lazy-load="false"
            style="width: 52px; height: 52px"
          >
        </div>
        <div class="u-f-ac u-f-column" style="float: right">
          <div class="data-box-text">今日用户新增数</div>
          <div class="data-box-num">
            {{ dayUserCount }}
          </div>
        </div>
      </div>
      <div class="data-box" style="float: right">
        <div style="float: left">
          <img
            src="../../../assets/img/user-pic.png"
            mode="widthFix"
            lazy-load="false"
            style="width: 52px; height: 52px"
          >
        </div>
        <div class="u-f-ac u-f-column" style="float: right">
          <div class="data-box-text">用户总数</div>
          <div class="data-box-num">
            {{ allUserCount }}
          </div>
        </div>
      </div>
    </div>
    <div id="user-chart" class="user-chart" />
  </div>
</template>

<script>
var data1 = []
import {
  getAllUserCount,
  getDayUserCount,
  getLastMonUser,
  getLastTwoMonUser
} from '../../../api/report/userCount.js'
import qs from 'qs'
export default {
  name: 'UserReport',
  data() {
    return {
      allUserCount: 0,
      dayUserCount: 0
    }
  },
  created() {
    this.getAllUserCount()
    this.getDayUserCount()
    this.getMonUserList()
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    getAllUserCount() {
      getAllUserCount(qs.stringify()).then((res) => {
        this.allUserCount = res.allUserCount
      })
    },
    getDayUserCount() {
      getDayUserCount(qs.stringify()).then((res) => {
        this.dayUserCount = res.dayUserCount
      })
    },
    getMonUserList() {
      getLastTwoMonUser(qs.stringify()).then((res) => {
        data1[0] = res.lastTwoMonUser
      })
      getAllUserCount(qs.stringify()).then((res) => {
        data1[2] = res.allUserCount
      })
      getLastMonUser(qs.stringify()).then((res) => {
        data1[1] = res.lastMonUser
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('user-chart'))
      // 绘制图表
      const option = {
        title: {
          text: '近三月用户量统计'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['7月', '8月', '9月'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '用户数量',
            type: 'bar',
            barWidth: '60%',
            data: data1
          }
        ]
      }

      myChart.setOption(option)
    }
  }
}
</script>

<style>
.u-f,
.u-f-ac,
.u-f-ajc {
  display: flex;
}
.u-f-ac {
  align-items: center;
}
.u-f-ajc {
  justify-content: center;
}
.u-f-jsp {
  justify-content: space-between;
}
.u-f-column {
  flex-direction: column;
}
.u-f-row {
  flex-direction: row;
}

.user-chart {
  width: auto;
  height: 470px;
  margin: 0 50px;
  padding: 50px;
  background-color: white;
}

.data-box {
  margin: 0 30px;
  width: 400px;
  height: 100px;
  padding: 20px;
  background-color: white;
  box-shadow: 3upx 3upx 5upx black;
}

.data-box-text {
  color: #00000073;
  font-size: 16px;
  font-weight: bold;
  margin-right: 5px;
}

.data-box-num {
  color: #0a98d5;
  font-size: 20px;
  font-weight: bold;
  margin-top: 12px;
}
</style>
